<template>
  <el-row style="height: 100%;overflow: hidden;">
    <el-col :span="24" style="height: 100%">
      <el-row
        style="height: 30px;line-height: 30px;text-align: center; background: #19202f;color: #fff;font-size: 12px;overflow:hidden;"
      >
        <el-col :span="1" style="overflow:hidden;">
          <el-button
            @click="back"
            style="position: relative;top: -4px;color:#fff;"
            icon="el-icon-arrow-left"
            type="text"
            >返回</el-button
          >
        </el-col>
        <el-col :span="23">打印爱心</el-col>
      </el-row>
      <el-row style="height: 100%;">
        <el-col
          :span="7"
          style="background: #ffffff;height: 60%;padding: 30px;"
        >
          <el-steps
            direction="vertical"
            :active="3"
            finish-status="success"
            style="color: #181677;"
          >
            <el-step
              v-for="item in leftDatas"
              :title="item.name"
              :key="item"
              style="color: #181677; white-space: pre-wrap;"
            >
              <template v-slot:description>
                <div style="white-space:pre;" v-html="item.question_title"></div>
              </template>
            </el-step>
          </el-steps>
        </el-col>
        <el-col
          :span="8"
          style="background: #19202f;height: 100%;position: relative;"
        >
          <editor
            class="deditor"
            v-model="content"
            @init="editorInit"
            lang="java"
            theme="monokai"
          ></editor>
          <el-button
            type="warning"
            style="position: absolute;right: 30px;bottom: 60px;"
            @click="clickRun(true)"
            >运行</el-button
          >
        </el-col>
        <el-col :span="9" style="background: #272c36;height: 100%;">
          <div style="width: 100%;white-space: pre-wrap;color: #fff;">
            终端（输入完后按回车键）<br />{{ codeResult }}
          </div>
          <input
            ref="inputText"
            @keyup.enter="clickRun"
            v-model="inputText"
            class="input-textarea"
          />
          <div
            v-if="errMessage && errMessage !== true"
            style="width: 40%;position: fixed;bottom: 40px;background: red;opacity: 0.7;border-radius: 5px;padding: 3px; color: #fff;"
          >
            {{ errMessage }}
          </div>
          <div
            v-if="errMessage === true"
            style="width: 40%;position: fixed;bottom: 40px;background: #108861;opacity: 0.7;border-radius: 5px;padding: 3px; color: #fff;"
          >
            程序运行通过
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from "vuex";
import { codeRun, homework } from "@/api/api";
export default {
  name: "CodeAfter",
  components: {
    editor: require("vue2-ace-editor")
  },
  computed: {
    ...mapGetters(["token"])
  },
  data() {
    return {
      content: "",
      guan_id: undefined,
      course_id: undefined,
      leftDatas: [],
      codeResult: "",
      errMessage: undefined,
      inputText: "",
      token: undefined
    };
  },
  mounted() {
    this.guan_id = this.$route.query.guan_id;
    this.course_id = this.$route.query.course_id;
    this.token = this.$route.query.token;
    if (!this.guan_id) {
      this.$message("请传入guan_id");
      return;
    }
    if (!this.course_id) {
      this.$message("请传入course_id");
      return;
    }
    homework({
      guan_id: this.guan_id,
      course_id: this.course_id,
      token: this.token
    }).then(res => {
      this.leftDatas = res.data.data;
    });
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    clickRun(isRun) {
      let self = this;
      let param = "";
      if (isRun === true) {
        self.codeResult = "";
        self.codeId = undefined;
        self.inputText = "";
        param = "java_source=" + this.content;
      } else {
        self.codeResult += "\n" + self.inputText;
        param = "codeId=" + self.codeId + "&subVal=" + self.inputText;
        self.inputText = "";
      }
      codeRun(encodeURI(param).replace(/\+/g, "%2B")).then(res => {
        res = res.data;
        console.log(res);
        self.errMessage = undefined;
        if (
          res === undefined ||
          (typeof res !== "number" && res.indexOf("error:") === 0)
        ) {
          console.log(res.indexOf("error:") === 0);
          self.errMessage =
            "程序编译出错" +
            (res.indexOf(".java:") > 0
              ? ".错误在第" +
                res.substring(
                  res.indexOf(".java:") + 1,
                  res.indexOf(": error:")
                ) +
                "行"
              : "");
          self.$refs.inputText.blur();
          return;
        }
        if (res.indexOf("java.lang.IllegalAccessException") > -1) {
          self.errMessage = "类声明必须为：public class ***";
          self.$refs.inputText.blur();
          return;
        }
        let datas = res.split("--<>--");
        self.codeResult += "\n" + datas[0];
        self.codeId = datas[1];
        if (self.codeId && self.codeId.length > 0) {
          self.$refs.inputText.focus();
        } else {
          self.$refs.inputText.blur();
          self.errMessage = true;
        }
      });
    },
    editorInit() {
      require("brace/ext/language_tools");
      require("brace/mode/java");
      require("brace/theme/monokai");
    }
  }
};
</script>
<style>
/*步骤条样式修改*/
.el-steps.el-steps--horizontal
  /deep/
  .el-step.is-horizontal.is-center
  /deep/
  .el-step__head.is-finish {
  color: #181677 !important;
  border-color: #181677 !important;
}
.el-step__head.is-success {
  color: #181677;
  border-color: #181677;
}
.el-step__head.is-success {
  color: #181677;
  border-color: #181677;
}
.el-step__description.is-success {
  color: #181677;
}
.el-step__title.is-success {
  color: #181677;
}
.el-steps.el-steps--horizontal
  /deep/
  .el-step.is-horizontal.is-center
  /deep/
  .el-step__title.is-finish {
  color: #181677;
}
.el-steps.el-steps--horizontal
  /deep/
  .el-step.is-horizontal.is-center
  /deep/.el-step__description.is-finish {
  color: #181677;
}
</style>
<style scoped>
.deditor {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 18px;
}
.ace-monokai {
  background-color: #19202f;
}

.input-textarea {
  width: 100%;
  background: #272c36;
  border: none;
  outline: none;
  color: #fff;
}

.click-run {
  position: absolute;
  top: -40px;
  right: 60px;
}
</style>
